"Fullscreen Search"
Bootstrap 4.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="myOverlay" class="overlay"> <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span> <div class="overlay-content"> <form action="/action_page.php"> <input type="text" placeholder="Search.." name="search" required autofocus> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> <center> <h2 style="margin-top:100px;">Fullscreen Search</h2> <p>Click on the button to open the search box.</p> <button style="margin-bottom:50px;" class="btn openBtn" onclick="openSearch()">Open Search Box</button> </center> </body> </html>
body {font-family: Arial;background-image: linear-gradient( 135deg, #F05F57 10%, #360940 100%);overflow: hidden;height: 100%;} * {box-sizing: border-box;} h2, p{color: #fff !important;text-shadow: 1px 1px 1px #000;} .openBtn {background: #f1f1f1;border: none;padding: 10px 15px;font-size: 20px;cursor: pointer;margin-top:20px;} .openBtn:hover {background: #bbb;} .overlay {height: 100%;width: 100%;display: none;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.7);transition: 0.3s;} .overlay-content {position: relative;top: 46%;width: 80%;text-align: center;margin-top: 30px;margin: auto;transition: 0.3s;} .overlay .closebtn {position: absolute;top: 20px;right: 45px;font-size: 60px;cursor: pointer;color: white;} .overlay .closebtn:hover {color: #ccc;} .overlay input[type=text] {padding: 15px;font-size: 17px;border: none;float: left;width: 60%;background: white;} .overlay input[type=text]:hover {background: #f1f1f1;transition: 0.3s;} .overlay button {float: left;width: 20%;padding: 15px;background: #ddd;font-size: 17px;border: none;cursor: pointer;transition: 0.3s;} .overlay button:hover {background: #bbb;}
function openSearch() { document.getElementById("myOverlay").style.display = "block"; } function closeSearch() { document.getElementById("myOverlay").style.display = "none"; }

Related: See More

BLK• Design System
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: